<template>
  <form :form="form">
    <a-table
      :columns="columns"
      :dataSource="tableData"
      :pagination="false"
      :scroll="{x:1100}"
    >
      <template v-for="(col, i) in ['cyxm', 'csny', 'gxmc', 'zzmmmc', 'cygzdw', 'cymc', 'lxdh']" :slot="col" slot-scope="text, record, index">
        <a-input
          :key="col"
          v-if="record.editable && col !== 'zzmmmc' && col !== 'gxmc' && col !=='cymc' && col != 'csny'"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="e => handleChange(e.target.value, col, index)"
        />
        <a-date-picker :key="col" v-else-if="record.editable && col === 'csny'" v-model="record.csny" style="width: 100%" format="YYYY-MM-DD"/>
        <a-select :key="col" @change="e => handleZzChange(e, index)" v-else-if="record.editable && col === 'zzmmmc'" style="width: 100%" v-model="record.zzmmm" >
          <a-select-option v-for="i in TYPE0020" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
        <a-select :key="col" @change="e => handleRelationChange(e, index)" v-else-if="record.editable && col === 'gxmc'" style="width: 100%" v-model="record.gxm" >
          <a-select-option v-for="i in TYPE0019" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
        <a-select :key="col" @change="e => handleZwChange(e, index)" v-else-if="record.editable && col === 'cymc'" style="width: 100%" v-model="record.cym" >
          <a-select-option v-for="i in TYPE0014" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
        </a-select>
        <template v-else>{{ typeof text === 'object' ? text.format('YYYY-MM-DD') : text }}</template>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a v-if="record.editable" @click="completeAdd(record)">完成</a>
        <a-popconfirm v-else title="是否要删除此行？" @confirm="remove(index)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newRow">新增行</a-button>
  </form>
</template>

<script>
import { mapState } from 'vuex'
import { STable } from '~'

export default {
  props: ['info'],
  components: {
    STable
  },
  data () {
    return {
      tableData: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'cyxm',
          scopedSlots: { customRender: 'cyxm' },
          width: 100
        },
        {
          title: '出生年月',
          dataIndex: 'csny',
          scopedSlots: { customRender: 'csny' },
          width: 100
        },
        {
          title: '与本人关系',
          dataIndex: 'gxmc',
          scopedSlots: { customRender: 'gxmc' },
          width: 100
        },
        {
          title: '政治面貌',
          dataIndex: 'zzmmmc',
          scopedSlots: { customRender: 'zzmmmc' },
          width: 100
        },
        {
          title: '工作单位',
          dataIndex: 'cygzdw',
          scopedSlots: { customRender: 'cygzdw' },
          width: 100
        },
        {
          title: '职务',
          dataIndex: 'cymc',
          scopedSlots: { customRender: 'cymc' },
          width: 100
        },
        {
          title: '联系电话',
          dataIndex: 'lxdh',
          scopedSlots: { customRender: 'lxdh' },
          width: 100
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'operation' },
          width:80
        }
      ],
      options: {
        alert: { show: false }
      }
    }
  },
  computed: {
    ...mapState({
      TYPE0020: state => state.app['TYPE0020'], // 政治面貌码
      TYPE0019: state => state.app['TYPE0019'], // 政治面貌码
      TYPE0014: state => state.app['TYPE0014'],
    })
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {
    this.$api.student.studentFamily(this.info.xh).then(res => {
      this.tableData = res.data.map(item => {
        return Object.assign(item, {editable: false})
      })
    })
    this.$store.dispatch('app/setDictionary', 'TYPE0020')
    this.$store.dispatch('app/setDictionary', 'TYPE0019')
    this.$store.dispatch('app/setDictionary', 'TYPE0014')
  },
  methods: {
    newRow () {
      let hasEdit = this.tableData.find(d => {
        return d.editable
      })
      if (hasEdit) {
        return this.$message.warning('请先完成前面的添加')
      }
      this.tableData.push({
        cyxm: '',
        gxmc: '',
        zzmmmc: '',
        cygzdw: '',
        cymc: '',
        lxdh: '',
        editable: true
      })
    },
    remove (index) {
      this.tableData.splice(index, 1)
    },
    completeAdd (data) {
      console.log(data)
      if (data.cyxm && data.gxm && data.zzmmm && data.cygzdw && data.cym && data.lxdh) {
        let reg1 = new RegExp("^[0-9]*$");
        if (data.lxdh.length > 11 || !reg1.test(data.lxdh)) {
          return this.$message.error('联系电话格式不正确')
        }
        return this.$set(data, 'editable', false)
      }
      this.$message.error('请输入完整的信息')
    },
    handleChange (value, column, index) {
      this.tableData[index][column] = value
    },
    handleZzChange (value, index) {
      let zIndex = this.TYPE0020.findIndex(v => {
        return v.code == value
      })
      if (zIndex !== -1) {
        this.tableData[index].zzmmmc = this.TYPE0020[zIndex].name
      }
    },
    handleRelationChange (value, index) {
      let zIndex = this.TYPE0019.findIndex(v => {
        return v.code == value
      })
      if (zIndex !== -1) {
        this.tableData[index].gxmc = this.TYPE0019[zIndex].name
      }
    },
    handleZwChange (value, index) {
      let zIndex = this.TYPE0014.findIndex(v => {
        return v.code == value
      })
      if (zIndex !== -1) {
        this.tableData[index].cymc = this.TYPE0014[zIndex].name
      }
    }
  }
}
</script>

<style>

</style>
